<template>
    <div>
        <!-- 查询条件开始 -->
        <el-form ref="searchOperLog" :model="searchOperLog" :inline="true" label-width="68px">
            <el-form-item label="系统模块" prop="title">
                <el-input
                        v-model="searchOperLog.title"
                        placeholder="请输入系统模块"
                        clearable
                        size="small"
                        style="width:200px"/>
            </el-form-item>
            <el-form-item label="操作人员" prop="operName">
                <el-input
                        v-model="searchOperLog.operName"
                        placeholder="请输入操作人员"
                        clearable
                        size="small"
                        style="width:200px"/>
            </el-form-item>
            <el-form-item label="操作类型" prop="businessType">
                <el-select
                        v-model="searchOperLog.businessType"
                        placeholder="请选择类型"
                        clearable
                        size="small"
                        style="width:200px">
                    <el-option
                            v-for="dict in businessTypeOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"/>
                </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select
                        v-model="searchOperLog.status"
                        placeholder="请选择状态"
                        clearable
                        size="small"
                        style="width:200px">
                    <el-option
                            v-for="dict in statusOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"/>
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker
                        v-model="searchOperLog.dateRange"
                        size="small"
                        style="width:240px"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        start-placeholde="开始日期"
                        end-placeholde="结束日期"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button type="normal" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 查询条件结束 -->
        <!-- 表头按钮开始 -->
        <el-row :gutter="10" style="margin-bottom: 8px;">
            <el-col :span="1.5">
                <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" icon="el-icon-thumb" size="mini" @click="handleClearInfo">清空</el-button>
            </el-col>
        </el-row>
        <!-- 表头按钮结束 -->
        <!-- 数据表格开始 -->
        <el-table  border :data="operLogTableList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form style="margin-left: 20px" >
                        <el-form-item label="操作模块">
                            <span>{{ props.row.title }}</span>
                        </el-form-item>
                        <el-form-item label="登陆信息">
                            <span>{{ props.row.operName }} // {{ props.row.operIp }} // {{ props.row.operLocation }}</span>
                        </el-form-item>
                        <el-form-item label="请求地址">
                            <span>{{ props.row.operUrl }}</span>
                        </el-form-item>
                        <el-form-item label="操作方法">
                            <span>{{ props.row.requestMethod }}</span>
                        </el-form-item>
                        <el-form-item label="请求参数">
                            <span>{{ props.row.operParam }}</span>
                        </el-form-item>
                        <el-form-item label="返回参数">
                            <span>{{ props.row.jsonResult }}</span>
                        </el-form-item>
                        <el-form-item label="操作状态">
                            <span>{{ props.row.status==0?'成功':'失败' }}</span>
                        </el-form-item>
                        <el-form-item label="操作时间">
                            <span>{{ props.row.operTime }}</span>
                        </el-form-item>
                        <el-form-item label="异常信息">
                            <span>{{ props.row.errorMsg }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="日志ID" align="center" prop="operId" />
            <el-table-column label="系统模块" align="center" prop="title" />
            <el-table-column label="操作类型" align="center" prop="businessType" :formatter="businessTypeFormatter" />
            <el-table-column label="请求方式" width="180" align="center" prop="requestMethod" />
            <el-table-column label="操作人员" align="center" prop="operName" />
            <el-table-column label="主机" align="center" prop="operIp" />
            <el-table-column label="操作地点" align="center" prop="operLocation" />
            <el-table-column label="操作状态" prop="status" align="center" :formatter="statusFormatter" />
            <el-table-column label="操作时间" align="center" prop="operTime" width="200" />
            <el-table-column label="操作" align="center" width="100">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 数据表格结束 -->

        <!-- 分页控件开始 -->
        <el-pagination
                v-show="page.total>0"
                :current-page="page.current"
                :page-sizes="[5,10,20,30]"
                :page-size="page.size"
                layout="total,sizes,prev,pager,next,jumper"
                :total="page.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"/>
        <!-- 分页控件结束 -->
    </div>
</template>

<script>
    export default {
        name: "OperLog",
        data(){
            return {
                //模糊查询
                searchOperLog:{},
                //系统状态
                statusOptions:[],
                //多选id框数据
                opersIds:[],
                //操作类型
                businessTypeOptions:[],
                //禁用按钮 批量删除
                multiple:true,
                //操作日志数据
                operLogTableList:[],
                //分页
                page:{
                    current:1,
                    size:10,
                    total:10
                },
            }
        },
        methods:{
            //加载表格数据
            getOperLogList(){
                const params=Object.assign(this.searchOperLog,this.page);
                this.$axios.post("system/api/operLog/getOperLogList",params).then(r=>{
                    this.operLogTableList=r.data.t.records;
                    this.page.total=r.data.t.total;
                })
            },
            //模糊查询
            handleQuery(){
                this.page.current=1;
                this.getOperLogList();
            },
            //重置模糊条件
            resetQuery(){
                this.searchOperLog={};
            },
            //删除 批量
            handleDelete(row){
                const operIds=row.operId || this.opersIds;
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.delete("system/api/operLog/delOperLog/"+operIds).then(r=>{
                        if (r.data.t){
                            this.$message.success(r.data.msg);
                        }else {
                            this.$message.error("操作失败");
                        }
                        this.page.current=1;
                        this.getOperLogList();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //清空
            handleClearInfo(){
                this.$confirm('此操作将清除所有数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.delete("system/api/operLog/clearOperLogTable").then(r=>{
                        this.$message.success(r.data.msg);
                        this.getOperLogList();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 数据表格的多选择框选择时触发
            handleSelectionChange(selection) {
                this.opersIds = selection.map(item => item.operId)
                this.multiple = !selection.length
            },
            // 分页pageSize变化时触发
            handleSizeChange(val) {
                this.page.size=val
                // 重新查询
                this.getOperLogList();
            },
            // 点击上一页  下一页，跳转到哪一页面时触发
            handleCurrentChange(val) {
                this.page.current=val;
                // 重新查询
                this.getOperLogList();
            },
            //加载状态字典
            initStatusOper(){
                this.$axios.get("system/api/dict/data/findByType/sys_common_status").then(r => {
                    this.statusOptions = r.data.t;
                })
            },
            //操作状态字典格式解析
            statusFormatter(row){
                var val = row.status;
                return this.formatDict(this.statusOptions,val);
            },
            //加载操作状态字典
            initbusinessType(){
                this.$axios.get("system/api/dict/data/findByType/sys_oper_type").then(r => {
                    this.businessTypeOptions = r.data.t;
                })
            },
            //操作类型字典解析
            businessTypeFormatter(row){
                var val = row.businessType;
                return this.formatDict(this.businessTypeOptions,val);
            },
        },
        created() {
            //加载表格数据
            this.getOperLogList();
            //加载状态字典
            this.initStatusOper();
            //加载操作状态字典
            this.initbusinessType();


        }
    }
</script>
<style scoped>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>

